<!--
 * author gaohailan
 * desc 图片上传单个或多个
 * date 2022-11-24
-->
<template>
  <div class="images-upload-list">
    <div v-if="!multiple && uploadType=='image'">
      <image-upload
        :key="uploadFile.imagecropperKey"
        v-model="imgIdsN"
        :preview-id="uploadFile.viewId"
        :forever="true"
        :width="width"
        :view="uploadFile.view"
        :height="height"
        :no-circle="true"
        :no-rotate="false"
        lang-type="zh"
        :is-oss="uploadFile.isOss"
        :text-tips="textTips"
        @changeOssPath="(path) =>{uploadFile.viewId = path}"
      />
    </div>
    <div v-if="multiple && uploadType=='image' && imgList" class="upload-multiple">
      <el-upload
        :action="uploadFile.view"
        list-type="picture-card"
        :file-list="imgList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        class="sameStyle"
      >
<!--        :class="[sameSizeIcon?'sameStyle':'']"-->
        <i class="el-icon-plus" />
      </el-upload>
      <image-uploads
        :key="uploadFile.imagecropperKey"
        :is-oss="uploadFile.isOss"
        :forever="true"
        :width="width"
        :view="uploadFile.view"
        :height="height"
        :limit="imgList.length"
        :no-circle="true"
        :no-rotate="false"
        lang-type="zh"
        :same-size-icon="sameSizeIcon"
        :text-tips="textTips"
        @changeImg="imgChangeClass"
      />
    </div>
    <div v-if="uploadType=='video'">
      <div class="selectbtn" @click="videosAdd">添加视频</div>
      <el-card v-if="videosList.length">
        <el-row class="attachment-item" :gutter="10">
          <draggable v-model="videosList" :animation="340" handle=".video-index-move">
            <el-col
              v-for="(item, index) in videosList"
              v-if="item && item.attachmentId"
              :span="8"
              class="video-item"
            >
              <img
                v-if="item && item.attachmentId"
                class="upload-img"
                src="../images/video-poster.png"
                @click="handlePreview(item.attachmentId, index)"
              >
              <el-button
                style="padding: 3px 0; font-size: 20px;"
                type="text"
                icon="el-icon-close"
                @click="videosDel(item, index)"
              />
              <el-tooltip class="item" effect="dark" content="拖动调整顺序" placement="top">
                <el-button
                  class="video-index-move"
                  style="padding: 3px 0; font-size: 20px;"
                  type="text"
                  icon="el-icon-rank"
                />
              </el-tooltip>
            </el-col>
          </draggable>
        </el-row>
      </el-card>
    </div>
    <div v-if="uploadType=='videoImg'">
      <div class="selectbtn" @click="videosAdd">添加视频</div>
      <el-card v-if="videosList.length">
        <el-row class="attachment-item" :gutter="10">
          <draggable v-model="videosList" :animation="340" handle=".video-index-move">
            <el-col
              v-for="(item, index) in videosList"
              v-if="item && item.attachmentId"
              :span="8"
              class="video-item"
            >
              <img
                v-if="item && item.attachmentId"
                class="upload-img"
                src="../images/video-poster.png"
                @click="handlePreview(item.attachmentId, index)"
              >
              <el-button
                style="padding: 3px 0; font-size: 20px;"
                type="text"
                icon="el-icon-close"
                @click="videosDel(item, index)"
              />
              <el-tooltip class="item" effect="dark" content="拖动调整顺序" placement="top">
                <el-button
                  class="video-index-move"
                  style="padding: 3px 0; font-size: 20px;"
                  type="text"
                  icon="el-icon-rank"
                />
              </el-tooltip>
            </el-col>
          </draggable>
        </el-row>
      </el-card>
      <image-upload
        :key="uploadFile.imagecropperKey"
        v-model="imgIdsN"
        :preview-id="viewImg"
        :forever="true"
        :width="width"
        :view="uploadFile.view"
        :height="height"
        :no-circle="true"
        :no-rotate="false"
        lang-type="zh"
        :is-oss="uploadFile.isOss"
        :text-tips="textTips"
        @changeOssPath="(path) =>{uploadFile.viewId = path}"
        @changeImg="imgChangeClass"
      />
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <video-upload
      v-if="uploadFile.showUpload===1"
      ref="videoUpload"
      :accept="uploadFile.accept"
      :limit="1"
      :show-chunks="true"
      :multiple="false"
      :chunk-size="uploadFile.chunksize"
      @close="uploadFile.showUpload = -1"
      @success="uploadSuccess"
    >
      <div slot="tip" class="upload-tip">
        <i class="el-icon-info" />
        :
        {{ uploadFile.fileType | filterTip }}
      </div>
    </video-upload>
  </div>
</template>
<script>
import ImageUploads from '@/components/ImageUploads'
import ImageUpload from '@/components/ImageUpload'
import VideoUpload from '@/components/VideoUpload'
import draggable from 'vuedraggable'
export default {
  name: 'ImagesUploadList',
  components: { ImageUpload, ImageUploads, VideoUpload, draggable },
  filters: {
    filterTip(ft) {
      if (ft === 'image') {
        return '只能上传：图片文件'
      } else if (ft === 'video') {
        return '只能上传：视频文件'
      } else {
        return '请上传附件'
      }
    }
  },
  model: {
    prop: 'imgIds',
    event: 'changeImgV'
  },
  props: {
    // 图片id
    imgIds: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 0
    }, // 剪裁图片的宽
    width: {
      type: Number,
      default: 200
    },
    // 剪裁图片的高
    height: {
      type: Number,
      default: 200
    },
    // 上传类型 图片 视频
    uploadType: {
      type: String,
      default: 'image' // image ,video ,videoImg
    },
    // 上传成功回调方法
    setValue: {
      type: Function,
      default: null
    },
    sameSizeIcon: {
      type: Boolean,
      default: false
    },
    imgList: { // 多张图片
      type: Array,
      default: () => []
    },
    videosList: {// 视频上传数组
      type: Array,
      default: () => []
    },
    videoImgType: { // 上传视频封面 大图big 小图min
      type: String,
      default: ''
    },
    // 图标上的文字提示
    textTips: {
      type: String,
      default: ''
    },
    setImgValue: {
      type: Function,
      default: null
    },
    viewImg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        showUpload: -1, // 1视频 2图片 3附件
        accept: '',
        fileType: '',
        fileIndex: 0,
        isOss: !!sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG')
      },
      dialogImageUrl: '',
      dialogVisible: false,
      videoIdList: [],
      imgIdsN: ''
    }
  },
  methods: {
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 删除图片
    handleRemove(file, fileList) {
      const dataClone = JSON.parse(JSON.stringify(this.imgList))
      const imgData = dataClone.filter((item) => item.url !== file.url)
      this.$emit('update:imgList',imgData)
      const arrId = []
      this.imgList.forEach((item) => arrId.push(item.id))
      this.$emit('changeImgV', arrId.join(','))
      if (this.uploadType == 'videoImg') {
        this.imgIdsN = arrId.join(',')
      }
    },
    // 上传图片回调id
    imgChangeClass(id) {
      if (this.uploadType == 'videoImg') {
        // this.$emit('changeImgV', id)
        this.setImgValue(id)
      } else {
        this.imgList.push({ url: this.uploadFile.view + id, id: id })
        const arrId = []
        this.imgList.forEach((item) => arrId.push(item.id))
        this.$emit('changeImgV', arrId.join(','))
      }
    },
    /**
     * 新闻视频-继续添加
     */
    videosAdd() {
      this.handleFileUpload('video', this.videosList.length)
    },
    /**
       * 视频预览
       */
    handlePreview(id) {
      this.preview.fileId = id
      this.preview.state = true
    },
    /**
       * 新闻视频-删除
       */
    videosDel(item, index) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.videosList.splice(index, 1)
        this.videoIdList.splice(index, 1)
        if (this.setValue) {
          this.setValue(this.videoIdList.join(','))
        }
      }).catch()
    },
    handleFileUpload(fileType, i) {
      this.uploadFile.fileType = fileType
      this.uploadFile.fileIndex = i
      if (fileType === 'video') {
        this.uploadFile.accept = 'video/mp4'
        this.uploadFile.showUpload = 1
      } else if (fileType === 'image') {
        this.uploadFile.accept = 'image/*'
        this.uploadFile.showUpload = 2
      } else {
        this.uploadFile.accept = ''
        this.uploadFile.showUpload = 3
      }
    },
    uploadSuccess(id, files) {
      if (id) {
        const fileType = this.uploadFile.fileType; const fileIndex = this.uploadFile.fileIndex
        if (fileType === 'image') {
          this.imageadd.attachmentId = id
          this.imageadd.attachmentName = files[0].name
        } else if (fileType === 'video') {
          if (this.videosList.length === 0 || this.videosList[this.videosList.length - 1].attachmentId !== '') {
            const temp = {
              attachmentId: '',
              explain: '',
              attachmentName: ''
            }
            this.videosList.push(temp)
          }
          this.videoIdList.push(id)
          this.videosList[fileIndex].attachmentId = id
          this.videosList[fileIndex].attachmentName = files[0].name
          if (this.setValue) {
            this.setValue(this.videoIdList.join(','))
          }
        } else {
          this.filesList[fileIndex].attachmentId = id
          this.filesList[fileIndex].attachmentName = files[0].name
          this.filesList[fileIndex].attachmentNameOld = files[0].name
        }
      }
      this.uploadFile.showUpload = -1
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
$mainColor: #18a5fd;
.images-upload-list {
  .el-upload--picture-card {
    display: none;
  }
  .upload-multiple{
    display: inline-block;
    justify-content: left;
    align-items: flex-start;
  }
  .sameStyle{
    .el-upload-list--picture-card .el-upload-list__item{
      width:var(--width);
      height: var(--height);
      line-height: 0;
    }
  }
  .el-card.is-always-shadow{
    margin-bottom: 10px;
  }
}
</style>

